<!-- 体征里2级路由各指标详情统计页面 -->
<template>
  <div id="signsDetailsSurface">
    <div class="singsDetailsCon" v-if="time.length">
      <ul class="cbp_tmtimeline">
        <li v-for="item1 in time">
          <div class="circle"></div><span class="time">{{item1|filterDateAxis}}</span>
          <div class="cbp_tmlabel">
            <ul class="list-record clearfix">
              <!--<li class="list-title pull-left">
                <p>时间</p>
                <p>数值</p>
              </li>-->
              <li class='pull-left' v-for="item in listData[item1]">
                <p>{{item.PER_Time|filterTimeM}}</p>
                <p>{{item.Values}}</p>
              </li>
            </ul>
          </div>
          <div class="circle-bottom"></div>
        </li>
      </ul>
    </div>
    <loading v-if="!time.length"></loading>
  </div>
</template>
<script>
  import loading from '@/components/loading/loading'
  import { apiSignsStatusList } from '@/api/api'  //引入体征详细列表数据
  export default {
    data() {
      return {
        time: [],
        listData: [],
        patientID: this.$store.getters.ID,
        dataTime: "0000-00-00",
        type: this.$route.query.signsIndex,
        startDate: "",
        endDate: ""
      }
    },
    mounted() {
      this.GetSignsStatusList();
    },
    methods: {
      GetSignsStatusList() {
        apiSignsStatusList({
          patientID: this.patientID,
          dateTime: this.dataTime,
          type: this.type,
          sort: "desc",
          startDate: this.startDate,
          endDate: this.endDate
        })
          .then(res => {
            if (JSON.parse(res).Status == 1) {
              this.listData = JSON.parse(res).Data;
              for (var item in JSON.parse(res).Data) {
                this.time.push(item);
              }
            }
          })
          .catch(err => {
            reject(err.data);
          });
      }
    },
    filters: {
      filterTimeM(time) {
        if (!time) '';
        return time.substring(11, 16);
      }
    },
    components: {
      loading
    },
  }
</script>
<style scoped>

  .title {
    padding-left: 45px;
    font-size: 16px;
    color: #11a7f3;
    padding-bottom: 15px;
  }

 .singsDetailsCon {
    padding-top: 5px;
    padding-left: 50px;
    padding-bottom: 20px;
    height: calc(100vh - 190px);
    overflow-y: auto;
  }

 .cbp_tmtimeline {
    list-style: none;
    position: relative;
  }

 .cbp_tmtimeline:before {
      content: '';
      position: absolute;
      top: 2px;
      bottom: 0;
      width: 1px;
      background: #ccc;
    }

 .cbp_tmtimeline > li {
      position: relative;
      padding-left: 20px;
    }

 .cbp_tmtimeline .circle {
      width: 8px;
      height: 8px;
      line-height: 8px;
      position: absolute;
      color: #fff;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #84c3e3;
      text-align: center;
      left: -3px;
      top: 6px;
    }

 .cbp_tmtimeline .circle-bottom {
      width: 8px;
      height: 8px;
      line-height: 8px;
      position: absolute;
      color: #fff;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #84c3e3;
      text-align: center;
      left: -3px;
      bottom: -14px;
    }

 .cbp_tmlabel {
    padding: 30px;
  }

 .list-record {
    display: inline-block;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
  }

 .list-record li {
      width: 80px;
      text-align: center;
      border-right: 1px solid #eee;
    }

 p:first-child {
    line-height: 52px;
    background-color: #f6f6f6;
  }

 .list-record li p:last-child {
    line-height: 46px;
  }

 .list-record li.list-title {
    background-color: #5db8e5;
    color: #fff;
    border-radius: 10px 0 0 10px;
  }

 .list-record li.list-title p:first-child {
      background-color: #5db8e5;
      border-radius: 10px 0 0 0;
    }

  @media screen and (min-width :1020px) {
 .list-record {
      max-width: 640px;
    }
  }

  @media screen and (min-width :1439px) {
  .list-record {
      max-width: 960px;
    }
  }
</style>
